<template>
  <div class="mod-demo-ueditor">
    <el-alert
      title="提示："
      type="warning"
      :closable="true">
      <div>
        <p class="el-alert__description">1. 此Demo只提供UEditor官方使用文档，入门部署和体验功能。具体使用请参考：http://fex.baidu.com/ueditor/</p>
        <p class="el-alert__description">2. 浏览器控制台报错“请求后台配置项http错误，上传功能将不能正常使用！”，此错需要后台提供上传接口方法（赋值给serverUrl属性）</p>
      </div>
    </el-alert>
    <vue-ueditor-wrap
      v-model="msg"
      :config="myConfig"
      :destroy="true"
      @ready="ready"
      mode="observer"
      :observerDebounceTime="100"
      :observerOptions="{ attributes: true, characterData: true, childList: true, subtree: true }">
    </vue-ueditor-wrap>
  </div>
</template>

<script>
  // 1、引入VueUeditorWrap组件
  import VueUeditorWrap from 'vue-ueditor-wrap' // ES6 Module
  // const VueUeditorWrap = require('vue-ueditor-wrap') // CommonJS
  export default {
    name: 'HelloWorld',
    // 2、注册组件
    components: {
      VueUeditorWrap
    },
    data () {
      return {
        msg: '<h2><img src="http://img.baidu.com/hi/jx2/j_0003.gif"/>Vue + UEditor + v-model双向绑定</h2>',
        myConfig: {
          // 编辑器不自动被内容撑高
          autoHeightEnabled: false,
          // 初始容器高度
          initialFrameHeight: 300,
          // 初始容器宽度
          initialFrameWidth: '100%',
          // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
          serverUrl: 'http://localhost:8520/upload/file',
          // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
          UEDITOR_HOME_URL: 'static/plugins/UEditor/',
        }
      }
    },
    mounted () {
      console.log('%c注意：本Demo提供的serverUrl是为了方便小伙伴们体验图片文件等上传功能。\n请勿在生产环境使用此serverUrl！！！', 'background:#f33;color:#fff')
    },
    methods: {
      // 5、 你可以在ready方法中拿到editorInstance实例,所有API和官方的实例是一样了。http://fex.baidu.com/ueditor/#api-common
      ready (editorInstance) {
        console.log(`实例${editorInstance.key}已经初始化:`, editorInstance)
      },
    }
  }
</script>

<style lang="scss">
  .mod-demo-ueditor {
    position: relative;
    z-index: 510;
    > .el-alert {
      margin-bottom: 10px;
    }
  }
</style>
